<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" href="/assets/amazeui/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/assets/amazeui/css/amazeui.datatables.min.css"/>
    <link rel="stylesheet" href="/assets/amazeui/css/my.css"/>
    <link rel="stylesheet" href="/assets/ztree/css/metroStyle/metroStyle.css"/>
    <link rel="stylesheet" href="/assets/iziModal/css/iziModal.css"/>
</head>
<body>

<table width="100%" class="am-table am-table-striped am-table-bordered
            am-table-compact am-text-nowrap am-table-hover am-margin-top-lg" id="table">
    <thead>
    <tr class="am-text-center">
        <td>编号</td>
        <td>名称</td>
        <td>类型</td>
        <td>标识</td>
        <td>url</td>
        <td>父权限</td>
        <td>是否可用</td>
        <td>创建时间</td>
        <td>排序号</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody class="am-text-center"></tbody>
</table>
<@shiro.hasPermission name="permission:add">
<div class="am-g">
    <div class="am-u-sm-12">
        <button class="am-btn am-btn-secondary am-radius am-btn-xs" onclick="toAdd();">新增权限</button>
    </div>
</div>
</@shiro.hasPermission>
<div class="am-g">
    <div class="am-u-sm-12">
        <ui id="permissionTree" class="ztree"></ui>
    </div>
</div>

<div id="modal" class="iziModal">
    <div class="am-g am-margin-top-lg">
        <form class="am-form am-form-horizontal">
            <input type="hidden" id="permissionId"/>
            <div class="am-form-group">
                <label for="nameId" class="am-u-sm-2 am-form-label">权限名称</label>
                <div class="am-u-sm-10">
                    <input id="nameId" type="text" placeholder="输入权限名称"/>
                </div>
            </div>
            <div class="am-form-group">
                <label for="parentId" class="am-u-sm-2 am-form-label">父权限编号</label>
                <div class="am-u-sm-10">
                    <input id="parentId" type="text" placeholder="输入父权限编号"/>
                </div>
            </div>
            <div class="am-form-group">
                <label for="typeId" class="am-u-sm-2 am-form-label">类型</label>
                <div class="am-u-sm-10">
                    <select id="typeId">
                        <option value="1">目录</option>
                        <option value="2">页面</option>
                        <option value="3">功能</option>
                    </select>
                </div>
            </div>
            <div class="am-form-group">
                <label for="urlId" class="am-u-sm-2 am-form-label">页面url</label>
                <div class="am-u-sm-10">
                    <input id="urlId" type="text" placeholder="输入页面url"/>
                </div>
            </div>
            <div class="am-form-group">
                <label for="tagId" class="am-u-sm-2 am-form-label">标识</label>
                <div class="am-u-sm-10">
                    <input id="tagId" type="text" placeholder="输入标识"/>
                </div>
            </div>
            <div class="am-form-group">
                <label for="orderNumId" class="am-u-sm-2 am-form-label">排序号</label>
                <div class="am-u-sm-10">
                    <input id="orderNumId" type="number" placeholder="输入栏目排序号" required="required"/>
                </div>
            </div>
            <div class="am-form-group">
                <label for="usableId" class="am-u-sm-2 am-form-label">是否可用</label>
                <div class="am-u-sm-10">
                    <select id="usableId">
                        <option value="1">可用</option>
                        <option value="0">不可用</option>
                    </select>
                </div>
            </div>
            <div class="am-form-group">
                <div class="am-u-sm-12 am-text-center">
                    <button class="am-btn am-btn-secondary am-radius am-btn-xs submit">提交</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="/assets/iziModal/js/jquery-2.2.4.js"></script>
<script src="/assets/iziModal/js/iziModal.js"></script>
<script src="/assets/amazeui/js/amazeui.js"></script>
<script src="/assets/amazeui/js/amazeui.datatables.min.js"></script>
<script src="/assets/ztree/js/jquery.ztree.all.js"></script>
<script>
    var table;
    $(function () {
        loadTable();
        init();
        loadTree();
    });

    function toDel(permissionId) {
        if(window.confirm("确定删除该权限?")){
            $.ajax({
                type: 'post',
                url: '/sys/permission/toDel',
                dataType: 'json',
                data: {
                    permissionId: permissionId
                },
                success: function(result){
                    if(result.code==1){
                        alert(result.errMsg);
                    }else{
                        $("#modal").iziModal('close');
                        table.draw(false);
                        loadTree();
                    }
                }
            });
        }
    }

    function toAdd() {
        $("#permissionId").val('');
        $("#nameId").val('');
        $("#parentId").val('');
        $("#typeId").val('1');
        $("#urlId").val('');
        $("#tagId").val('');
        $("#orderNumId").val('');
        $("#usableId").val('1');
        $("#modal").iziModal('setTitle','新增权限');
        $("#modal").iziModal('open');
    }

    function edit(row){
        $("#permissionId").val(row.permissionId);
        $("#nameId").val(row.name);
        $("#parentId").val(row.parentId);
        $("#typeId").val(row.type);
        $("#urlId").val(row.url);
        $("#tagId").val(row.tag);
        $("#orderNumId").val(row.orderNum);
        $("#usableId").val(row.usable);
        $("#modal").iziModal('setTitle','修改权限');
        $("#modal").iziModal('open');
    }

    function init() {
        $("#modal").iziModal({
            title: 'title',
            icon: 'icon-star',
            headerColor: '#00af66',
            width: 600,
            transitionIn: 'bounceInUp',
            transitionOut: 'bounceOutDown',
            overlayClose: false,
            closeOnEscape: false,
            openFullscreen: false
        });
        $("#modal").on('click','.submit',function(event){
            event.preventDefault();
            var permissionId = $("#permissionId").val();
            var name = $("#nameId").val();
            var parentId = $("#parentId").val();
            var type = $("#typeId").val();
            var url = $("#urlId").val();
            var tag = $("#tagId").val();
            var orderNum = $("#orderNumId").val();
            var usable = $("#usableId").val();

            $.ajax({
                type: 'post',
                url: '/sys/permission/save',
                dataType: 'json',
                data: {
                    permissionId: permissionId,
                    name: name,
                    parentId: parentId,
                    tag: tag,
                    url: url,
                    type: type,
                    usable: usable,
                    orderNum: orderNum
                },
                success: function(result){
                    if(result.code==1){
                        alert(result.errMsg);
                    }else{
                        $("#modal").iziModal('close');
                        table.draw(false);
                        loadTree();
                    }
                }
            });
        })
    }

    function loadTree(){
        $.ajax({
            type: 'post',
            url: '/sys/permission/getTree',
            dataType: 'json',
            success: function(result){

                if(result&&result.data){

                    var noteArr = new Array();
                    $.each(result.data,function(index,obj){
                        var node = {};
                        node.id = obj.permissionId;
                        node.pId = obj.parentId;
                        node.name = obj.name;
                        if(obj.usable){
                            node.chkDisabled = false;
                        }else{
                            node.chkDisabled = true;
                        }
                        if(obj.type!=3){
                            node.isParent = true;
                            node.open = false;
                        }else{
                            node.isParent = false;
                        }
                        noteArr[index] = node;
                    });

                    var setting = {
                        view: {
                            selectedMulti: false
                        },
//                    check: {
//                        enable: true
//                    },
                        data: {
                            simpleData: {
                                enable: true
                            }
                        }
                    };
                    $.fn.zTree.init($("#permissionTree"), setting, noteArr);
                }
            }
        });
    }

    function loadTable() {
        table = $("#table").DataTable({
            ordering: false,
            bLengthChange: false,
            ordering: false,
            bSort: false,
            serverSide: true,
            searching: false,
            iDisplayLength: 10,
            ajax: {
                url: "/sys/permission/queryList"
            },
            columns: [
                {data: "permissionId"},
                {data: "name"},
                {
                    data: "type",
                    render: function (data) {
                        if(data==1){
                            return "目录";
                        }else if(data==2){
                            return "菜单"
                        }else {
                            return "功能"
                        }
                    }
                },
                {data: "tag"},
                {data: "url"},
                {data: "parentName"},
                {
                    data: "usable",
                    render: function (data) {
                        if(data==1){
                            return "是"
                        }else{
                            return "否"
                        }
                    }
                },
                {data: "createTime"},
                {data: "orderNum"},
                {
                    data: 'op',
                    render: function (data,type,row,meta){
                        var btn;
                        if(row.usable==1){
                            btn = "<div>" +
                                    <@shiro.hasPermission name="permission:edit">
                                    "<button onclick='edit("+JSON.stringify(row)+");' class='am-btn-xs am-btn am-radius am-btn-secondary'>修改</button>"+
                                    </@shiro.hasPermission>
                                    "</div>";

                        }else{
                            btn = "<div>" +
                                    <@shiro.hasPermission name="permission:edit">
                                    "<button onclick='edit("+JSON.stringify(row)+");' class='am-btn-xs am-btn am-radius am-btn-secondary'>修改</button> "+
                                    </@shiro.hasPermission>
                                    <@shiro.hasPermission name="permission:delete">
                                    "<button onclick='toDel("+row.permissionId+");' class='am-btn-xs am-btn am-radius am-btn-warning'>删除</button>"+
                                    </@shiro.hasPermission>
                                    "</div>";
                        }
                        return btn;
                    }
                }
            ]
        });
    }
</script>

</body>
</html>